<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="../../public/static/api/activity/js/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <title>积分商城</title>
    <style>
        .shop-container{
            background-color: #E4C896;
            width:100%;
            height:400px;
        }
        .shop-top{height:40px;border-bottom: 1px solid #9F6B30;display: flex;justify-content:space-between;color: #9F6B30;}
        .shop-top-1{display:flex;}
        .shop-top-1 span{font-size:16px;line-height: 40px;margin-left:10px;font-weight: bold;}
        .shop-top-1 div{font-size:16px;width:60px;background-color: #9F6B30;color:#FFFFFF;height:20px;border-radius: 8px;margin-top:10px;margin-left:10px;text-align: center;}
        .my-orders{margin-right:20px;}
        .shop-product-list{width: 100%;}
        .product-item{text-align:center;float: left;width: 20%;height:140px;margin-left:3%;margin-right:2%;margin-top:3%;margin-bottom: 2%;}
        .product-item-img{background-repeat:no-repeat;background-position:center;background-size: 100% 100%;background-color: #DFB673;height:90px;}
        .product-item-top{border-radius:5px;border:2px solid #FFE08B;color: #9F6B30}
        .btn-default{height:24px;line-height: 12px;width:80%;margin-top:5px;color: #FFF;background-color: #9F6B30;}
        .layui-m-layermain, .layui-m-layershade{
            position: fixed;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .layui-m-layercont{
            padding: 10px 10px !important;
            line-height: 18px !important;
        }
        .title-color{
            color: red;
        }
        .layui-m-layerbtn{
            background-color:#FFF !important;
        }
    </style>
</head>
<body>
    <div class="shop-container">
        <div class="shop-top">
            <div class="shop-top-1">
                <span>我的积分</span>
                <div>{$coin.coin}</div>
                <span><img onclick="tixing()" style="width:22px;height:22px;" src="../../public/static/api/images/wh.png"></span>
            </div>
            <div class="shop-top-1">
                <span class="my-orders" onclick="goto('shopping/orderlist')">我的订单</span>
            </div>
        </div>
        <div class="shop-product-list">
            {volist name="shop_info" id="val" empty="$empty"}
            <div class="product-item">
                <div class="product-item-top">

                    <div class="product-item-img" style="background-image: url('{$val.img_path}');"></div>
                    <span>({$val.shop_name})</span><br/>
                    <span>{$val.coin}积分</span>
                </div>
                <button type="button" class="btn btn-default" onclick="duihuan('{$val.coin}','{$val.serial}')">兑换</button>
            </div>
            {/volist}
        </div>
    </div>
<script type="text/javascript" src="../../public/static/api/js/layer.js"></script>
<script>
    function tixing(){
        layer.open({
            content:'<div style="text-align: left;font-size: 11px;">'+
                '<span class="title-color">1、积分如何获取？</span><br/>' +
                '<span>在好友群参与游戏后，玩家每局可随机获得一定的积分。（游戏结算后会弹出获取的积分值）</span><br/>' +
                '<span class="title-color">2、兑换须知：</span><br/>' +
                '<span>我的积分大于等于对应礼品积分才能兑换，在兑换商品前，请进行实名认证。填写收货信息时，名字、手机号和身份证号需与实名认证信息一致方可成功兑换并邮寄礼品。</span><br/>' +
                '<span class="title-color">3、礼品说明：</span><br/>' +
                '<span>礼品图片与实物可能略有差异，请以实物为准，兑换礼品后的发货时间统一为每月15号和30号或根据实际情况实时发货。</span><br/>' +
                '<span class="title-color">4、特别提醒：</span><br/>' +
                '<span>关于礼品内容、积分获得方式与商品兑换积分值可能不定期进行调整，最终解释权归公司所有。由于不可抗力因素、利用网络、系统bug、等其他途径非法获得积分，公司有权采取暂停赠送礼品或清除玩家积分。</span><br/>' +
                '</div>'
            ,btn: '禄宏运营团队'
        });
    }
    function goto(url){
        window.location.href=url;
    }

    function duihuan(coin,id){
        var myCoin = '{$coin.coin}';
        if(Number(myCoin) < Number(coin)){
            layer.open({
                content: '积分不足',
                //btn:'确定',
                skin: 'msg',
                style:"position: fixed;" +
                    "left: 40%;" +
                    "top: 50%;" +
                    "width: 15%;" +
                    "height: 12%;",
                time: 2 //2秒后自动关闭
            });
        }else{
            window.location.href='shopping/duihuan?id='+id;
        }
    }
</script>
</body>
</html>